html,
body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

body {
    background-color: goldenrod;
}

html {
    overflow: hidden;
    border: 1px solid rgb(76, 0, 255);
    /* 设置边框宽度和颜色 */
    box-sizing: border-box;
    /* 包含边框和内边距 */
}

#bgView {
    margin: 5px;
    padding: 0px;
    height: calc(100% - 10px);
    width: calc(100% - 10px);
    background-color: aqua;
    border: 1px solid red;
    /* 设置边框宽度和颜色 */
    display: flex;
    overflow-x: auto;
    /* 启用水平滚动 */
    /* gap: 10px; */
    box-sizing: border-box;
    /* justify-content: center; */
    align-items: center;
    /* flex-wrap: wrap; 如果子视图过多，可以自动换行 */
}

.subview {
    flex-grow: 1;
    /* 让子视图自动扩展以填满容器宽度 */
    flex-basis: 0;
    /* 确保子视图开始时宽度为 0，允许其平分父容器宽度 */
    /* width: 40px; */
    height: calc(100% - 20px);
    background-color: lightcoral;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    margin: 10px;
    min-width: 40px;
    /* 防止内容影响子视图的最小宽度 */

}


/* 设置滑块的基础样式 */
.slider {
    writing-mode: bt-lr;
    /* 设置滑块竖直显示 */
    width: 10px;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: red;
    border-radius: 10px;
    cursor: pointer;
    /* transform: rotate(270deg);
    -webkit-transform: rotate(270deg); */
    /* 针对 Safari */
    /* margin: 10px; */
}

/* 自定义滑块的拇指样式 */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    /* 设置拇指的颜色 */
    border-radius: 50%;
    border: 2px solid #333;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    border: 2px solid #333;
    cursor: pointer;
}


